<template>
	<div class="editClockinRule">
		<div style="height: 50px; font-size: 30px; font-weight: bold;">
			<span v-if="clockinRule.name != null">{{clockinRule.name}}</span>
			<span v-if="clockinRule.nickName != null">{{clockinRule.nickName}}</span>
		</div>
		<div style="margin-bottom: 20px;display: flex;justify-content: space-between;">
			<div>
				<el-button type="primary" plain @click="toBack">返回</el-button>
			</div>
			<div>
				<el-button @click="reset('clockinRule')">重置</el-button>
				<el-button type="primary" @click="onSubmit('clockinRule')">提交</el-button>
			</div>
		</div>
		<el-form ref="clockinRule" :model="clockinRule" :rules="rules" label-width="120px" :inline="true">
			<el-form-item label="上午签到时间" prop="forenoonCheckinTime" style="margin-right: 30px;">
				<el-time-picker v-model="clockinRule.forenoonCheckinTime" placeholder="选择时间">
				</el-time-picker>
			</el-form-item>
			<el-form-item label="上午签退时间" prop="forenoonCheckoutTime" style="margin-right: 30px;">
				<el-time-picker v-model="clockinRule.forenoonCheckoutTime" placeholder="选择时间">
				</el-time-picker>
			</el-form-item>
			<el-form-item label="下午签到时间" prop="afternoonCheckinTime" style="margin-right: 30px;">
				<el-time-picker v-model="clockinRule.afternoonCheckinTime" placeholder="选择时间">
				</el-time-picker>
			</el-form-item>
			<el-form-item label="下午签退时间" prop="afternoonCheckoutTime" style="margin-right: 30px;">
				<el-time-picker v-model="clockinRule.afternoonCheckoutTime" placeholder="选择时间">
				</el-time-picker>
			</el-form-item>
			<el-form-item label="打卡时间段" prop="clockinTimePeriod" style="margin-right: 30px;">
				<el-input type="number" style="width: 100px;" placeholder="时间段"
					v-model="clockinRule.clockinTimePeriod" @change="handleInput">
				</el-input>
				<label style="margin-left: 10px;">分钟</label>
			</el-form-item>
		</el-form>
		<div style="height: 600px;">
			<div style="margin-bottom: 20px;">打卡范围</div>
			<MapPolygon style="height: 100%;" :coordinate="clockinRule.coordinate" :edit="true"
				@change="coordinateChange">
			</MapPolygon>
		</div>

	</div>
</template>

<script>
	import MapPolygon from "../../components/AMap/MapPolygon.vue"
	import employeeAttendanceApi from "../../api/employeeAttendance.js"
	export default {
		components: {
			MapPolygon
		},
		data() {
			return {
				clockinRule: {
					id: null,
					employeeId: null, //员工ID
					departmentId: [], //部门id
					attendanceDates: [], //出勤日期（年-月-日）
					forenoonCheckinTime: null, //上午正常签到时间
					forenoonCheckoutTime: null, //上午正常签退时间
					afternoonCheckinTime: null, //下午正常签到时间
					afternoonCheckoutTime: null, //下午正常签退时间
					clockinTimePeriod: 10, //打卡时间段
					coordinate: null, //展示的打卡范围
					clockinPosition: null, //提交的打卡范围
					ruleType: null, //规则类型（0个人规则，1部门规则）
					name: null, // 部门名称
					empno: null, // 员工工号
					nickName: null, // 员工姓名
				},
				months: [],
				checkList: [],
				rules: {
					forenoonCheckinTime: [{
						required: true,
						message: '请设置时间',
						trigger: 'change'
					}],
					forenoonCheckoutTime: [{
						required: true,
						message: '请设置时间',
						trigger: 'change'
					}],
					afternoonCheckinTime: [{
						required: true,
						message: '请设置时间',
						trigger: 'change'
					}],
					afternoonCheckoutTime: [{
						required: true,
						message: '请设置时间',
						trigger: 'change'
					}],
					clockinTimePeriod: [{
						required: true,
						message: '请设置打卡时间段',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			const data = localStorage.getItem("clockinRule");
			if (data) {
				this.clockinRule = JSON.parse(data)
				console.log("clockinRule===>", this.clockinRule)
			}

		},
		destroyed() {
			localStorage.removeItem("clockinRule")
		},
		methods: {
			toBack() {
				this.$router.push({
					path: "/employeeAttendance/clockinRuleList"
				})
			},
			// 重置
			reset(formName) {
				this.$refs[formName].resetFields();
				this.clockinRule.forenoonCheckinTime = null;
				this.clockinRule.forenoonCheckoutTime = null;
				this.clockinRule.afternoonCheckinTime = null;
				this.clockinRule.afternoonCheckoutTime = null;
				this.clockinRule.clockinTimePeriod = null;
				this.clockinRule.coordinate = null;
				this.clockinRule.clockinPosition = null;
			},
			// 提交
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.clockinRule.clockinPosition === null || this.clockinRule.clockinPosition === '') {
							this.$message.error("请绘制打卡范围")
							return
						}
						this.$confirm('是否提交?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							// 处理时间
							this.clockinRule.forenoonCheckinTime = this.getHMS(this.clockinRule.forenoonCheckinTime)
							this.clockinRule.forenoonCheckoutTime = this.getHMS(this.clockinRule.forenoonCheckoutTime)
							this.clockinRule.afternoonCheckinTime = this.getHMS(this.clockinRule.afternoonCheckinTime) 
							this.clockinRule.afternoonCheckoutTime = this.getHMS(this.clockinRule.afternoonCheckoutTime) 
							console.log("提交的数据==>", this.clockinRule)
							employeeAttendanceApi.updateClockinRule(this.clockinRule).then(res =>{
								if(res.code === 200){
									this.$message.success("提交成功");
									this.toBack();
								}
							})
						}).catch(() => {
							// this.$message({
							// 	type: 'info',
							// 	message: '已取消删除'
							// });
						});
					}
				});
			},
			// 打卡时间段校验
			handleInput(value) {
				//console.log("event==>",event)
				let inputValue = value;
				// 移除开头的负号
				if (inputValue.charAt(0) === '-') {
					inputValue = inputValue.slice(1);
				}
				// 只允许输入数字
				this.clockinRule.clockinTimePeriod = inputValue.replace(/[^\d]/g, '');
			},
			// 获取新的经纬度数组
			coordinateChange(newValue) {
				//console.log("==>", newValue)
				if (newValue !== null && newValue.length > 0) {
					let stringValue = '';
					for (var i = 0; i < newValue.length; i++) {
						if (i === newValue.length - 1) {
							stringValue = stringValue + newValue[i].join(",")
						} else {
							stringValue = stringValue + newValue[i].join(",") + ";"
						}
					}
					this.clockinRule.clockinPosition = stringValue;
				}
			},
			getHMS(date){
				const originalDate = new Date(date);
				const hours = originalDate.getHours();
				const minutes = originalDate.getMinutes();
				const seconds = originalDate.getSeconds();
				
				const formattedTime = `${hours}:${minutes}:${seconds}`;
				console.log(formattedTime);
				return formattedTime;
			}
		}
	}
</script>

<style>
</style>